<!--
 * @Author: dongweipeng dongweipeng@supos.com
 * @Date: 2025-01-09 13:24:51
 * @LastEditors: dongweipeng dongweipeng@supos.com
 * @LastEditTime: 2025-03-12 16:23:14
 * @FilePath: \supos-ce-fuxa\client\src\app\device\device-tag-selection\device-tag-selection.component.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<div class="container" style="height: 550px;">
    <h1 mat-dialog-title class="dialog-title" mat-dialog-draggable>{{'device-tag-dialog-title' | translate}}</h1>
    <mat-icon (click)="onNoClick()" class="dialog-close-btn">clear</mat-icon>
    <div class="table-outer">
        <div class="table-inner">
            <cdk-virtual-scroll-viewport tvsItemSize="48" headerHeight="56" style="height: 500px;" itemSize="48">
                <table mat-table #table [dataSource]="dataSource" matSort class="dialog-mdsd-table">
                    <!-- Checkbox Column -->
                    <ng-container matColumnDef="toogle">
                        <th mat-header-cell *matHeaderCellDef style="padding-left: 5px;padding-right: 10px;">
                            <button mat-icon-button (click)="onClearSelection()" class="remove">
                                <mat-icon>clear</mat-icon>
                            </button>
                        </th>
                        <td mat-cell *matCellDef="let element" style="padding-left: 15px;">
                            <mat-checkbox (click)="$event.stopPropagation()" (change)="onToogle(element)" [(ngModel)]="element.checked">
                            </mat-checkbox>
                        </td>
                    </ng-container>
                    <!-- Name Column -->
                    <ng-container matColumnDef="name">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header class="my-header-filter">
                            <span>{{'device.list-name' | translate}}</span>
                            <input (click)="$event.stopPropagation()" [formControl]="nameFilter" style="width: 200px" class="my-header-filter-input" type="text">
                        </th>
                        <td mat-cell *matCellDef="let element" style="padding-right: 20px;"> {{element.name}} </td>
                    </ng-container>
                    <!-- Address Column -->
                    <ng-container matColumnDef="address">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header class="my-header-filter">
                            <span>{{'device.list-address' | translate}}</span>
                            <input (click)="$event.stopPropagation()" [formControl]="addressFilter" style="width: 360px" class="my-header-filter-input" type="text">
                        </th>
                        <td mat-cell *matCellDef="let element"> {{element.address}} </td>
                    </ng-container>
                    <!-- Device Column -->
                    <ng-container matColumnDef="device">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header class="my-header-filter">
                            <span>{{'device.list-device' | translate}}</span>
                            <input (click)="$event.stopPropagation()" [formControl]="deviceFilter" style="width: 200px" class="my-header-filter-input" type="text">
                        </th>
                        <td mat-cell *matCellDef="let element"> {{element.device}} </td>
                    </ng-container>
                    <!-- Select Column -->
                    <ng-container matColumnDef="select">
                        <th mat-header-cell *matHeaderCellDef style="padding-right: 0px;">
                            <!-- <button mat-icon-button [matMenuTriggerFor]="devicesMenu" class="remove">
                                <mat-icon>add_circle_outline</mat-icon>
                            </button> -->
                            <mat-menu #devicesMenu [overlapTrigger]="false">
                                <ng-container *ngFor="let device of devices">
                                    <button *ngIf="isDeviceTagEditable(device.type)" mat-menu-item (click)="onAddDeviceTag(device)">{{ device.name }}</button>
                                </ng-container>
                            </mat-menu>
                        </th>
                        <td mat-cell *matCellDef="let element" style="padding-right: 0px;">
                            <button mat-icon-button (click)="onSelect(element)">
                                <mat-icon>check</mat-icon>
                            </button>
                        </td>
                    </ng-container>

                    <tr mat-header-row *matHeaderRowDef="defColumns; sticky: true;" style="min-height: 30px;"></tr>
                    <tr mat-row *matRowDef="let row; columns: defColumns;"></tr>
                </table>
            </cdk-virtual-scroll-viewport>
        </div>
    </div>

    <div mat-dialog-actions class="dialog-action" style="padding-top: 30px;">
        <button mat-raised-button (click)="onNoClick()" cdkFocusInitial>{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button color="primary" (click)="onOkClick()">{{'dlg.ok' | translate}}</button>
    </div>
</div>
